<template>
  <div>
    <!--查询条件-->
    <div>
      <!--按照起始和结束日期查-->
    <el-row>
      <el-col :span=2>
        <el-tag>起始日期</el-tag>
      </el-col>
      <el-col :span=3>
        <div class="block">
          <el-date-picker
            v-model="para_startDate"
            type="date"
            style="width:100%"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </div>
      </el-col>

      <el-col :span=2>
        <el-tag>截止日期</el-tag>
      </el-col>
      <el-col :span=3>
        <div class="block">
          <el-date-picker
            v-model="para_endDate"
            type="date"
            style="width:100%"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </div>
      </el-col>
      <!--按照资金年度查-->
      <el-col :span=2>
        <el-tag>资金年度</el-tag>
      </el-col>
      <el-col :span=3>
        <el-input v-model='para_year'></el-input>
      </el-col>
      <!--按照困难职工编号查-->
      <el-col :span=2>
        <el-tag>员工编号</el-tag>
      </el-col>
      <el-col :span=3>
        <el-input v-model='para_workerId'></el-input>
      </el-col>

    </el-row>
    <el-divider></el-divider>
      <el-row>
        <!--按照金额范围查-->
        <el-col :span=2>
          <el-tag>最小金额</el-tag>
        </el-col>
        <el-col :span=3>
          <el-input v-model='para_minPrice'></el-input>
        </el-col>

        <el-col :span=2>
          <el-tag>最大金额</el-tag>
        </el-col>
        <el-col :span=3>
          <el-input v-model='para_maxPrice'></el-input>
        </el-col>
        <!--按照救助类别查-->
        <el-col :span=2>
          <el-tag>救助类别</el-tag>
        </el-col>
        <el-col :span=3>
          <el-input v-model='para_category'></el-input>
        </el-col>

        <!--查询按钮-->
        <el-col :span=3 push="2">
          <el-button type="primary" style="width: 100%" @click="queryRecords">查询</el-button>
        </el-col>

      </el-row>

    </div>
    <el-divider></el-divider>
    <!--表头-->
    <el-table :data="tableData.slice((currentPage-1)*PageSize,currentPage*PageSize)" :row-class-name="rowClassName" style="width: 100%" border="">
      <el-table-column prop="id" label="序号" width="180" ></el-table-column>
      <el-table-column prop="assistDate" label="日期" width="180"></el-table-column>
      <el-table-column prop="year" label="资金年度"></el-table-column>
      <el-table-column prop="money" label="金额"></el-table-column>
      <el-table-column prop="category" label="救助类别"></el-table-column>
      <el-table-column prop="workerId" label="员工编号"></el-table-column>

    </el-table>
    <!--分页-->
    <div class="tabListPage">
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="currentPage"
                     :page-sizes="pageSizes"
                     :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper"
                     :total="totalCount">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import instance from "../../../utils/request";

export default {
  name: "ExpendManagement",
  data(){
    return{
      para_id:'',
      // para_idNumber:'',
      para_workerId:'',
      para_name:'',
      para_year:'',     //资金年度
      para_category:'', //种类
      para_minPrice:'', //最小金额
      para_maxPrice:'', //最大金额
      para_startDate:'',//起始日期
      para_endDate:'',  //截至日期
      tableData:[],
      // 默认显示第几页
      currentPage:1,
      // 总条数，根据接口获取数据长度(注意：这里不能为空)
      totalCount:0,
      // 个数选择器（可修改）
      pageSizes:[1,2,3,4,5,6],
      // 默认每页显示的条数（可修改）
      PageSize:6,
    }
  },
  methods:{
    rowClassName({ row, rowIndex }) {
      row.id = rowIndex + 1;
    },
    // 分页
    // 每页显示的条数
    handleSizeChange(val) {
    // 改变每页显示的条数
      this.PageSize=val
    // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.currentPage=1
    },
    // 显示第几页
    handleCurrentChange(val) {
    // 改变默认的页数
      this.currentPage=val
    },
    queryRecords(){
      let queryStr;
      let para_startDate,para_endDate,para_workerId,para_category,para_year,para_minPrice,para_maxPrice;
      para_startDate = (this.para_startDate === '') ? '':('startDate=' + this.para_startDate);
      para_endDate = (this.para_endDate === '') ? '' : ('endDate=' + this.para_endDate);
      para_minPrice = (this.para_minPrice === '') ? '' : ('minPrice=' + this.para_minPrice);
      para_maxPrice = (this.para_maxPrice === '') ? '' : ('maxPrice=' + this.para_maxPrice);
      para_year = (this.para_year === '') ? '' : ('sYear=' + this.para_year);
      para_category = (this.para_category === '') ? '' : ('sCategory=' + this.para_category);
      para_workerId = (this.para_workerId === '') ? '' : ('workerId=' + this.para_workerId);
      if(this.para_startDate === '' && this.para_endDate === '' &&  this.para_minPrice === '' && this.para_maxPrice ==='' && this.para_year === '' && this.para_category === '' && this.para_workerId === ''){
        queryStr = '';
      }
      else {
        queryStr = '?' + para_startDate + '&' + para_endDate  + '&'+ para_minPrice + '&' + para_maxPrice +'&' + para_year + '&'+ para_category + '&' + para_workerId;
      }
      let _this = this;
      let url = '/api/expend/search';
      axios.get(url + queryStr).then(function (res) {
        if(res.data.code === 200){
          _this.tableData = res.data.data;
          _this.totalCount = _this.tableData.length;
        }
        else{
          console.log(res.data.code);
          //alert(res.data.code)
          // alert('查询出错啦，请重试');
        }
      }).catch(function (err) {
        console.log(err);
      })
    }
  },
  //获取数据库中数据，查询所有
  created() {
    let _this = this;
    instance.get('/api/expend/search').then(function (res) {
      if(res.data.code === 200){
        _this.tableData = res.data.data;
        _this.totalCount = _this.tableData.length;
      }
      console.log(_this.tableData);
    })
  }
}
</script>

<style scoped>

</style>
